<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Chat</title>
    <style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
        background: #f4f4f4;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    
    .container {
        width: 90%;
        max-width: 400px;
        background: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
    }
    
    h2 {
        color: #333;
    }
    
    #response {
        margin-top: 15px;
        padding: 12px;
        border-radius: 8px;
        background: #eef2ff;
        border-left: 4px solid #4CAF50;
        font-size: 16px;
        text-align: left;
        word-wrap: break-word;
    }
    
    input[type="text"] {
        width: 100%;
        padding: 12px;
        margin-top: 10px;
        border: 1px solid #ccc;
        border-radius: 6px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        font-size: 16px;
        outline: none;
    }
    
    button {
        width: 100%;
        padding: 12px;
        margin-top: 10px;
        background: linear-gradient(135deg, #4CAF50, #388E3C);
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }
    
    button:hover {
        background: linear-gradient(135deg, #45a049, #2E7D32);
        transform: translateY(-2px);
    }
    
    @media (max-width: 600px) {
        body {
            padding: 10px;
        }
    }

    </style>
</head>
<body>

<div class="container">
    <h2>问答机器人</h2>
    <input type="text" id="userInput" placeholder="输入问题..." onfocus="triggerLED()" />
    <button onclick="getAnswer()">获取回答</button>
    
    <div id="response"></div>
</div>

<script>
    async function getAnswer() {
        const userQuestion = document.getElementById('userInput').value;
        if (!userQuestion) {
            alert('请输入问题');
            return;
        }

        try {
            const response = await fetch('http://localhost:3000/ask', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ question: userQuestion })
            });

            const data = await response.json();
            console.log('百度 API 响应:', data);

            if (data && data.answer && data.emotion) {
                document.getElementById('response').innerHTML = `回答：<br>${data.answer} <br> 情绪：${data.emotion}`;
                sendEmotionToESP32(data.emotion);
            } else {
                document.getElementById('response').innerHTML = `返回数据：<br>${JSON.stringify(data)}`;
            }

        } catch (error) {
            console.error('获取回答时发生错误:', error);
            document.getElementById('response').innerHTML = '获取回答时发生错误，请稍后再试。';
        }
    }

    async function sendEmotionToESP32(emotion) {
        try {
            await fetch('http://192.168.43.173/emotion', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ emotion })
            });
        } catch (error) {
            console.error('发送情绪到 ESP32 失败:', error);
        }
    }

    async function triggerLED() {
        try {
            await fetch('http://192.168.43.173/trigger-led', { method: 'POST' });
        } catch (error) {
            console.error('触发 LED 失败:', error);
        }
    }
</script>

</body>
</html>
